<template>
	<view class="receive">
		<!-- 背景图 -->
		<view class="receive_nav">
			<image :src="info.img" mode="">
			</image>
		</view>
		<!-- 头部 -->
		<view class="receive_head">
			<view class="font-333333 font14 font-b">{{info.name}}</view>
			<!-- 10满减卷  -->
			<view class="receive_money" v-if="info.coupon_type==10">
				<text class="font-ff6428 font11">￥</text>
				<text class="font-ff6428 font22 font-b margin_num">{{info.reduce_money}}</text>
				<text class="font-666666 font11">满￥{{info.full_money}}使用</text>
			</view>
			<!-- 20折扣卷 -->
			<view class="receive_money" v-if="info.coupon_type==20">
				<text class="font-ff6428 font22 font-b margin_num">{{info.discount*10}}折</text>
				<text class="font-666666 font11">全场不包含运费</text>
			</view>
			<!-- 30立即卷 -->
			<view class="receive_money" v-if="info.coupon_type==30">
				<text class="font-ff6428 font11">￥</text>
				<text class="font-ff6428 font22 font-b margin_num">立减{{info.reduce_money}}</text>
			</view>
			<!-- 40兑换卷 -->
			<view class="receive_money" v-if="info.coupon_type==40">
				<text class="font-1e1e1e font22 font-b margin_num">兑换商品(无门槛限制)</text>
			</view>
			<!-- 50停车券 -->
			<view class="receive_money" v-if="info.coupon_type==50">
				<text class="font-1e1e1e font22 font-b margin_num">停车券(无门槛限制)</text>
			</view>
			<view class="receive_label flex-row-start">
				<view class="flex-row-center font-ff6428 font11">{{info.verify_mode ==10?'线上使用':'线下门店核销'}}</view>
				<view class="flex-row-center font-ff6428 font11">{{info.is_give ==1?'支持转赠':'不支持转赠'}}</view>
			</view>
			<!-- 按钮 -->
			<view class="info_button flex-row-start">
				<view @click="Ontrue" class="infoB_b1 flex-row-center"
					:class="look&&info.is_give ==1&&infoall.status == 'normal'?'infoB_h2':'infoB_h1'">
					{{infoall.typename?infoall.typename:''}}
				</view>
				<!--  #ifdef  MP-WEIXIN -->
				<button v-if="look&&info.is_give==1&&infoall.status == 'normal'"
					class="infoB_h2 flex-row-center infoB_b2" open-type="share" title="分享">转赠给好友</button>
				<!--  #endif -->
				<!--  #ifdef  H5 -->
				<view v-if="look&&info.is_give==1&&infoall.status == 'normal'" class="infoB_h2 flex-row-center infoB_b2"
					@click="Ongive">转赠给好友</view>
				<!--  #endif -->
			</view>
		</view>
		<!-- 详情 -->
		<view class="receive_info">
			<view class="receivei_time">
				<view class="font-666666 font13 font-b">有效期</view>
				<view class="font-323232 font13">
					<view class="margin-20">开始时间:{{infoall.begin_time}}</view>
					<view class="margin-20">结束时间:{{infoall.end_time}}</view>
					<view class="margin-20">可用时段:{{info.week_title}}</view>
					<view class="margin-20">每日使用时段:{{info.everyday_title}}</view>
				</view>
			</view>
			<view class="receivei_box">
				<view class="font-666666 font13 font-b">使用规则</view>
				<view class="flex-row-start margin-30" v-if="info.verify_mode ==10" @click="Onpages">
					<view class="font-323232 font13">
						{{info.classify==10?'指定门店使用,点击查看详情':info.classify==20?'指定商品使用：点击查看指定商品':
					info.use_room_type==0?'指定房型使用：点击查看指定房型':info.use_room_type==1?'指定普通房型使用：点击查看指定房型':'指定时租房使用：点击查看指定时租房'}}
					</view>
					<image src="https://static.newbeaconhotels.com/app/hotel/group/more1.png" mode=""></image>
				</view>
				<view v-if="info.verify_mode ==20" class="flex-row-start margin-30">
					<view class="font-323232 font13">线下扫码核销</view>
				</view>
			</view>
			<view class="receivei_box" v-if="info.verify_mode ==20 && info.classify==10">
				<view class="font-666666 font13 font-b">可使用门店</view>
				<view class="receivei_store" v-for="(item,index) in infoall.store_list" :key="index">
					<view class="font-323232 font13">{{item.name}}</view>
				</view>
			</view>
			<view class="receivei_bos">
				<view class="font-666666 font13 font-b marginB-20">券详情</view>
				<rich-text class="font-323232 font13" :nodes="info.details"></rich-text>
			</view>
		</view>
		<!-- H5二维码 -->
		<!--  #ifdef  H5 -->
		<canvas canvas-id="qrcode" style="width: 300rpx;height: 300rpx;position: fixed; left: 200%;" />
		<!--  #endif -->
		<!-- 券弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="popup_bos flex-column-center">
				<view class="popup_tltle flex-row-center font-323232 font16 font-b">{{info.name}}</view>
				<view class="popup_code flex-row-center">
					<image :src="wxcode" mode=""></image>
				</view>
				<view class="popup_box flex-column-center">
					<view class="font-323232 font14 margin-20">{{infoall.coupon_code}}</view>
					<view class="font-b4b4b4 font11">请在本券提供者规定场所出示使用</view>
				</view>
			</view>
		</uni-popup>
		<!--  #ifdef  H5 -->
		<!-- H5分享 -->
		<JsharePopup ref="JsharePopup"></JsharePopup>
		<!--  #endif -->
	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/'
	import uQRCode from '../../js_sdk/Sansnn-uQRCode/uqrcode.js'
	import {
		pathToBase64,
		base64ToPath
	} from '../../js_sdk/mmmm-image-tools/index.js'
	import JsharePopup from '@/components/j-sharePopup/index.vue';
	export default {
		components: {
			lPainter,
			JsharePopup
		},
		data() {
			return {
				h5share: true,
				wxSdk: false, //H5api
				coupon_code: '', //券code
				wxcode: '', //二维码
				wxcodeshow: false, //二维码成功判断
				write: false, //核销
				give: false, //转赠
				look: false, //正常查看
				id: null, //券ID
				info: {}, //券数据
				infoall: {}, //总数据
				imgFullUrl: this.$Config.http_static, //图片地址
				http_h5_url: this.$Config.http_h5_url, //线上地址
				userInfo: {}, //用户信息
				idInfo: {}, //分享参数
				userType: 2, // 1员工，2会员
				Cuid:null,//所属性ID
			}
		},
		onLoad(options) {
			let that = this
			let data = {}
			if (this.$Route.query.data) {
				data = this.$base.OnWxoptions(this.$Route.query.data)
			}
			if (this.$Route.query.scene) {
				data = this.$base.OnWxoptions(this.$Route.query.scene)
			}
			// #ifdef H5
			this.$wxapi.OnwxSdk().then(res => {
				this.wxSdk = res.code == 1 ? true : false
			})
			// #endif
			this.look = false //正常查看
			this.write = false //核销
			this.give = false // 转赠
			this.coupon_code = data.id
			let token = uni.getStorageSync("token");
			this.idInfo = uni.getStorageSync('idInfo')
			//非赠送进来
			if (data.se != "zz") {
				this.$Http({
					url: 'user',
					token: true,
				}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
						//正常进来
						if (data.se == "zc") {
							this.look = true
							this.Oninfo()
						}
						//核销
						if (data.se == "hx") {
							this.write = true
							if (res.data.user.write_off == 1) {
								that.Oninfo()
							} else {
								uni.showModal({
									title: '核销提示',
									confirmText: '确定',
									confirmColor: '#ff4646',
									showCancel: false,
									content: '对不起,您没有核销权限,请联系管理员',
									success: function(res) {
										if (res.confirm) {
											that.$Router.replaceAll('/pages/home/index')
										}
									}
								});
							}
						}
					}
				});
			} else {
				//转赠
				this.give = true
				this.Cuid = data.Cuid
				this.Oninfo()
			}
		},
		methods: {
			//查看详情
			Oninfo() {
				let url = ''
				let data = {}
				url = 'myOrderCouponDetails'
				data.coupon_code = this.coupon_code
				this.$Http({
					url: url,
					data: data,
					token: true
				}).then(res => {
					if (res.code == 1) {
						if (res.data.coupon.everyday_time == 1) {
							res.data.coupon.everyday_title = '全天可用'
						} else if (res.data.coupon.everyday_time == 2) {
							res.data.coupon.everyday_title = res.data.coupon.day_begin_time + '至' + res.data.coupon
								.day_end_time + '内'
						}
						res.data.coupon.img = this.imgFullUrl + res.data.coupon.img
						res.data.coupon.week = res.data.coupon.week.split(',');
						res.data.coupon.details = res.data.coupon.details.replace(/\<img/gi,
							'<img class="rich-img670"')
						let week_title = []
						res.data.coupon.week.forEach(item => {
							item == 1 ? week_title.push('一') : ''
							item == 2 ? week_title.push('二') : ''
							item == 3 ? week_title.push('三') : ''
							item == 4 ? week_title.push('四') : ''
							item == 5 ? week_title.push('五') : ''
							item == 6 ? week_title.push('六') : ''
							item == 7 ? week_title.push('日') : ''
						})
						res.data.coupon.week_title = '周' + week_title.toString() + '可用'
						res.data.begin_time = this.$base.formatTime(new Date(res.data.begin_time * 1000),
							"yyyy-MM-dd hh:mm:ss")
						res.data.end_time = this.$base.formatTime(new Date(res.data.end_time * 1000),
							"yyyy-MM-dd hh:mm:ss")

						if (res.data.status == 'use') {
							res.data.typename = '已使用'
						}
						if (res.data.status == 'overdue') {
							res.data.typename = '已过期'
						}

						if (res.data.status == 'normal') {
							//正常进来的
							if (this.look) {
								res.data.typename = '立即使用'
							}
							//核销进来
							if (this.write) {
								res.data.typename = '立即核销'
							}
							//转赠进来
							if (this.give) {
								res.data.typename = '立即领取'
							}
						}
						//如果可以分享
						if (res.data.coupon.is_give == 1 && !this.give) {
							let message_id = '';
							let $C = this.idInfo.Cid
							if ($C) {
								message_id = 'Pid.' + this.idInfo.Pid + ',Fid.' + this.idInfo.Fid + ',Cuid.' + res
									.data.user_id + ',id.' + this
									.coupon_code + ',se.zz' + ',Cid.' + $C
							} else {
								message_id = 'Pid.' + this.idInfo.Pid + ',Fid.' + this.idInfo.Fid + ',Cuid.' + res
									.data.user_id + ',id.' + this
									.coupon_code + ',se.zz'
							}

							// #ifdef MP-WEIXIN
							this.share.type = true
							this.share.title = '您有一张' + res.data.coupon.coupon_type_name + '待领取'
							this.share.desc = '您的好友' + this.userInfo.user.name + '赠送您一张' + res.data.coupon
								.coupon_type_name
							this.share.imageUrl = res.data.coupon.img
							this.share.path = '/pages/coupon/info?scene=' + message_id
							// #endif
							// #ifdef H5
							if (this.wxSdk) {
								this.share.type = true
								this.share.path = '/pages/coupon/info?scene=' + message_id
								this.share.title = '您有一张' + res.data.coupon.coupon_type_name + '待领取'
								this.share.imageUrl = res.data.coupon.img
								this.Onshare()
							}
							// #endif
						}
						this.info = res.data.coupon
						this.infoall = res.data
						//线下使用才获取二维码
						if (res.data.coupon.verify_mode == 20) {
							// #ifdef MP-WEIXIN
							// 获取二维码
							this.OngetWxcode()
							// #endif
							// #ifdef H5
							// 获取H5二维码
							this.OnH5wxcode()
							// #endif
						}
					}
				});
			},
			//h5发送给好友
			Ongive() {
				this.$refs.JsharePopup.Onopen()
			},
			//小程序获取二维码
			OngetWxcode() {
				let data = {}
				data.message_id = 'id.' + this.coupon_code + ',se.hx'
				data.page = '/pages/coupon/info'
				this.$Http({
					url: 'getQrcode',
					data: data,
				}).then(res => {
					if (res.code == 1) {
						this.wxcodeshow = true
						this.wxcode = res.data // 将回车换行换为空字符''
					}
				});
			},
			//H5海报二维码
			OnH5wxcode() {
				let that = this
				console.log(that.http_h5_url + '/pages/coupon/info?scene=id.' + that.coupon_code +
					',se.hx', '看看')
				uQRCode.make({
					canvasId: 'qrcode',
					text: that.http_h5_url + '/pages/coupon/info?scene=id.' + that.coupon_code +
						',se.hx',
					size: uni.upx2px(300)
				}).then(res => {
					base64ToPath(res)
						.then(path => {
							that.wxcode = path
							that.wxcodeshow = true
						})
						.catch(error => {
							console.error(error)
						})
				}).finally(() => {

				})
			},
			//使用或核销或领取
			Ontrue() {
				let that = this
				if (this.infoall.status != 'normal') {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '此券已使用或已过期'
					});
					return
				}
				//正常进来的
				if (this.look) {
					//线上使用
					if (this.info.verify_mode == 10) {
						this.Onpages()
					}
					//线下使用
					if (this.info.verify_mode == 20) {
						if (this.wxcodeshow) {
							this.$refs.popup.open()
						} else {
							uni.showToast({
								icon: 'none',
								duration: 2000,
								title: '二维码生成中'
							});
						}
					}
				}
				//核销进来
				if (this.write) {
					uni.showModal({
						title: '操作提示',
						confirmText: '确定',
						confirmColor: '#ff4646',
						cancelText: '取消',
						content: '您确定要核销此券吗',
						success: function(res) {
							if (res.confirm) {
								that.$Http({
									url: 'verifyOrderCoupon',
									show: true,
									type: 'POST',
									token: true,
									data: {
										coupon_code: that.coupon_code
									},
								}).then(res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'none',
											duration: 2000,
											title: '核销成功'
										});
										// #ifdef MP-WEIXIN
										that.$Router.replaceAll('/pages/coupon/voloff')
										// #endif
										// #ifdef H5
										uni.setStorage({
											key: 'firstType',
											data: true,
										})
										window.location.href = that.http_h5_url +
											'/pages/coupon/voloff'
										// #endif
									} else {
										uni.showToast({
											icon: 'none',
											duration: 2000,
											title: res.msg
										});
									}
								});
							}
						}
					});
				}
				//转赠进来
				if (this.give) {
					this.$Http({
						url: 'receiveFromCoupon',
						show: true,
						type: 'POST',
						token: true,
						data: {
							order_coupon_id: this.infoall.id,
							p_user_id:this.Cuid
						},
					}).then(res => {
						if (res.code == 1) {
							uni.showModal({
								title: '操作提示',
								content: '恭喜您,领取成功~',
								confirmText: '我知道了',
								confirmColor: '#ff3c37',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										that.$Router.replaceAll('/pages/coupon/myList')
									}
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								duration: 2000,
								title: res.msg
							});
						}
					});
				}
			},
			//页面跳转
			Onpages() {
				//制定商品使用
				if (this.info.classify == 20) {
					this.$Router.push('/pages/group/list?id=' + this.info.id)
				}
				//酒店使用
				if (this.info.classify == 10 || this.info.classify == 30) {
					//指定普通房型使用
					if (this.info.use_room_type == 1) {
						this.$Router.push('/pages/hotel/hotelList?couponId=' + this.info.id)
					}
					//指定时租房使用
					if (this.info.use_room_type == 2) {
						this.$Router.push('/pages/hotel/hourRoomList?couponId=' + this.info.id)
					}
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
